<template>
    <div style="height: 720px">
        <div style="margin-top:20px">
            <el-tabs type="border-card" :stretch="true" class="jianBian" @tab-click="clickTab">
                <el-tab-pane>
                    <span slot="label" style="font-size:24px;"> 活动公告</span>
                    <div v-if="isNotShowDetial">
                        <div style="height:420px; margin-top:20px">
                            <!-- <el-row style="margin:5px 0 0 200px">
                                <el-col :span="18">
                                    <el-card style="height:180px">
                                        <img src="https://www.aihuaju.com/data/upload/shop/article/05353169284567275.jpg" class="image">
                                        <div style="margin: -170px 0 0 200px; width:400px">
                                            <span style="color:brown; font-size:20px">{{ notices[0].title }}</span>
                                            <P style="font-size:16px;color:midnightblue;margin-top:5px">
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ notices[0].content.slice(0,110) }}......
                                            </P>
                                            <el-button @click="viewDetial(notices[0].id)" type=“text” style="float:right; color:chocolate; border: none;"><span style="font-size: 20px">查看详情>></span></el-button>
                                        </div>

                                    </el-card>
                                </el-col>
                            </el-row> -->

                            <el-row v-for="item in notices" :key="item.id"  style="margin:10px 0 0 200px">
                                <el-col :span="18">
                                    <el-card style="height:50px">
                                        <div style="margin-top: -12px">
                                            <el-button @click="viewDetial(item.id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; font-weight:600">▪ {{ item.title }}</el-button>
                                            <el-button @click="viewDetial(notices[0].id)" type=“text” style=" color:chocolate; border: none; float:right; margin-right:-20px;"><span style="font-size: 20px">查看详情>></span></el-button>
                                            <span style="float:right; margin-top:6px; margin-right:10px;">{{ item.createTime.substring(0,10) }}</span>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>

                        <!--  <el-row style="margin:10px 0 0 200px">
                                <el-col :span="18">
                                    <el-card style="height:40px">
                                        <div style="margin-top: -17px">
                                            <el-button @click="viewDetial(notices[2].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[2].title }}</el-button>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>

                            <el-row style="margin:10px 0 0 200px">
                                <el-col :span="18">
                                    <el-card style="height:40px">
                                        <div style="margin-top: -17px">
                                            <el-button @click="viewDetial(notices[3].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[3].title }}</el-button>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>

                            <el-row style="margin:10px 0 0 200px">
                                <el-col :span="18">
                                    <el-card style="height:40px">
                                        <div style="margin-top: -17px">
                                            <el-button @click="viewDetial(notices[4].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[4].title }}</el-button>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>

                            <el-row style="margin:10px 0 0 200px">
                                <el-col :span="18">
                                    <el-card style="height:40px">
                                        <div style="margin-top: -17px">
                                            <el-button @click="viewDetial(notices[5].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[5].title }}</el-button>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row> -->

                        </div>
                    </div>

                    <div v-else class="" style="height:440px">
                        <el-row style="margin:5px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:420px">
                                    <div style="width:550px; margin-top:20px">
                                        <span style="color:palevioletred; font-size:25px; margin-left: 150px; margin-top: 20px; font-weight:600;">{{ detailData.title }}</span>
                                        <P style="font-size:21px;color:black;margin: 20px 0 0 100px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ detailData.content }}</P>
                                        <div style="margin-top:20px">
                                            <el-button @click="back" type=“text” style="float:right; color:chocolate; margin-top:10px; margin-right:100px"><span style="font-size: 25px;">返回</span></el-button>
                                            <el-button @click="$router.push('/front/popular')" type=“text” style="float:right; color:chocolate;  margin-top:10px; margin-right:60px"><span style="font-size: 25px;">前往选购</span></el-button>
                                        </div>
                                    </div>

                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>

                <el-tab-pane>
                    <span slot="label" style="font-size:24px;"> 最新公告</span>
                    <div v-if="isNotShowDetial" style="height:440px">
                        <!-- <el-row style="margin:5px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:180px">
                                    <img src="	https://i.za3.cn/g/1/2019/01/1_06005283282919304_220.jpg" class="image">
                                    <div style="margin: -170px 0 0 200px; width:400px">
                                        <span style="color:brown; font-size:20px;">{{ notices[0].title }}</span>
                                        <P style="font-size:16px;color:midnightblue;margin-top:5px">
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ notices[0].content.slice(0,110) }}......
                                        </P>
                                        <el-button @click="viewDetial(notices[0].id)" type=“text” style="float:right; color:chocolate; border: none;"><span style="font-size: 20px">查看详情>></span></el-button>
                                    </div>

                                </el-card>
                            </el-col>
                        </el-row> -->

                        <el-row v-for="item in notices" :key="item.id" style="margin:10px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:50px">
                                    <div style="margin-top: -17px">
                                        <el-button @click="viewDetial(item.id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; font-weight:600">▪ {{ item.title }}</el-button>
                                        <el-button @click="viewDetial(item.id)" type=“text” style=" color:chocolate; border: none; float:right; margin-right:-20px;"><span style="font-size: 20px">查看详情>></span></el-button>
                                        <span style="float:right; margin-top:6px; margin-right:10px;">{{ item.createTime.substring(0,10) }}</span>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                        <!-- <el-row style="margin:10px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:40px">
                                    <div style="margin-top: -17px">
                                        <el-button @click="viewDetial(notices[2].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[2].title }}</el-button>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                        <el-row style="margin:10px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:40px">
                                    <div style="margin-top: -17px">
                                        <el-button @click="viewDetial(notices[3].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[3].title }}</el-button>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                        <el-row style="margin:10px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:40px">
                                    <div style="margin-top: -17px">
                                        <el-button @click="viewDetial(notices[4].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[4].title }}</el-button>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                        <el-row style="margin:10px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:40px">
                                    <div style="margin-top: -17px">
                                        <el-button @click="viewDetial(notices[5].id)" type=“text” style="color:brown; font-size:20px;text-decoration: none; border: none; ">▪ {{ notices[5].title }}</el-button>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row> -->

                    </div>

                    <div v-else class="" style="height:440px">
                        <el-row style="margin:5px 0 0 200px">
                            <el-col :span="18">
                                <el-card style="height:420px">
                                    <div style="width:550px; margin-top:30px">
                                        <span style="color:palevioletred; font-size:28px; margin-left: 100px; margin-top: 80px">{{ detailData.title }}</span>
                                        <P style="font-size:21px;color:black;margin: 20px 0 0 100px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ detailData.content }}
                                        </P>
                                        <el-button @click="back" type=“text” style="float:right; color:chocolate; border: none; margin-top:10px"><span style="font-size: 25px">返回>></span></el-button>
                                    </div>

                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>


                <div style="padding: 10px 0; margin-left:280px; margin-top:-10px;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[7, 5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </el-tabs>
        </div>
    </div>
</template>

<script>

export default {
  name: 'Activity',
  data(){
    return{
        notices: [],
        isNotShowDetial: true,
        detailData: "",
        currentTab: 0,
        title:'',
        pageNum: 1,
        pageSize: 7,
        total: 0,
    }
  },
  created(){
    this.load();
  },
  methods:{
    load(){
        // this.currentTab = currentTab
        this.request.get('/notice/page',{
            params:{
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
        }).then(res =>{
            if(res.code === '200'){
                this.notices = res.data.records;
                console.log('遥遥落后',this.notices);
                this.total = res.data.total
            }

        })
    },
    toChoose(){

    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.load();
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.load();
    },
    queryByCurrentTab(){
        if(this.currentTab === '0'){
            this.load()
        }else{
            this.request.get('/notice/list/'+this.currentTab,{
                params:{
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            }).then(res =>{
            if(res.code === '200'){
                this.notices = res.data.records;
                this.total = res.data.total
            }else{
                this.$notify.success(res.data.message)
            }
        })
        }

    },
    clickTab(tab,event){
        this.currentTab = tab.index;
        this.isNotShowDetial = true;
        this.queryByCurrentTab();
    },
    viewDetial(noticeId){
        this.isNotShowDetial = false
        this.request.get('/notice/getById/' + noticeId).then(res =>{
            this.detailData = res.data
        })
    },
    back(){
        this.isNotShowDetial = true
    }
  }
};
</script>

<style>
.jianBian{
    background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

}
.image{
    height: 170px;
    margin: -20px 0 0 -20px;
}

a:hover {
    color: rgb(187, 0, 255);
}

.el-tabs__item {

color: orange !important;

}


.el-tabs__item.is-active {
  color: rgb(202, 87, 172) !important;
}

</style>